<template>
  <div>
    <headNav title="答题结果"></headNav>
    <div class="headDivCss">您答对了</div>
    <div class="headDivCss" style="height: 1rem;"  >
      <span class="headDivCssText" >{{confirmNum.length}}</span>
      <span> / {{allResultData.length}}题</span>
    </div>
    <div class="progressBarCss" >
      <kProgress :percent="percentage" :line-height="10" color="#ff9900" bg-color="#e9e9e9" ></kProgress>
    </div>
    <div class="subjectDivCss" >
      <div v-for="(val, index) in allResultData" :key="index"
      class="subjectTextCss"  :class="{wrongTopicCss: val.isRight == false }"
      @click="choiceClick(val)">
        {{index + 1}}
      </div>
    </div>
    <div class="buttonDivCss" >
      <button type="default" class="buttonCss" @click="choiceClick(allResultData[0])" > 查看解析 </button>
      <button type="default" class="buttonCss2" @click="signOutClick"  > 退出 </button>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import kProgress from 'k-progress'
export default {
  components: {
    headNav,
    kProgress
  },
  data () {
    return {
      percentage: 60,  // 进度条百分比
      confirmNum: [],  // 答对的题目统计
    }
  },
  computed: {
    ...mapState({
      allResultData: state => state.wrongTopic.allResultData,
      whereabouts: state => state.wrongTopic.whereabouts
    })
  },
  mounted() {
    console.log(this.allResultData)
    this.confirmNum = []
    for (let i = 0; i < this.allResultData.length; i++) {
      if (this.allResultData[i].isRight) {
        this.confirmNum.push(this.allResultData[i])
      }
    }
    
    let num = this.confirmNum.length / this.allResultData.length
    this.percentage = parseFloat((num * 100).toFixed(2))
  },
  methods: {
    ...mapMutations({
      controlSingleData: 'wrongTopic/controlSingleData'
    }),
    // 退出按钮触发事件
    signOutClick () {
      if (this.whereabouts == '/wrongTopic/questionDetails') {
         this.$router.push('/wrongTopic/wrongTopic')
      } else {
        this.$router.push(this.whereabouts)
      }
      this.$store.state.study.isFirst = true
    },
    // 点击单题触发事件
    choiceClick (e) {
      this.controlSingleData(e)
      this.$router.push('/wrongTopic/singleResult')
    }
  }
}
</script>

<style scoped lang="less" >
/* 上下居中, 左右居中 */
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.headDivCss {
  width: 7.2rem;
  height: 1.1rem;
  background: #FFF;
  font-size: 0.32rem;
  color: #666666;
  .flex;
}

.headDivCssText {
  color: orange;
  font-size: 0.45rem;
  margin: 0 0.1rem 0.1rem 0;
}

.progressBarCss {
  width: 6.8rem;
  height: 0.5rem;
  padding: 0.1rem 0 0 0.4rem ;
  background: #ffffff;
}

.subjectDivCss {
  width: 7.2rem;
  background: #FFF;
  padding-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
}

.subjectTextCss {
  border-radius: 0.8rem;
  width: .8rem;
  height: .8rem;
  text-align: center;
  line-height: .8rem;
  font-size: 0.32rem;
  color: #FFF;
  background: #04cb8a;
  margin: .1rem .2rem;
}

.buttonCss {
  width: 2.5rem;
  height: 0.72rem;
  border: 0;
  border-radius: 0.34rem;
  font-size: 0.32rem;
  color: #FFF;
  background: #128fef;
}

.buttonCss2 {
  width: 2.5rem;
  height: 0.72rem;
  border: 1px solid #128fef;
  border-radius: 0.34rem;
  font-size: 0.32rem;
  color: #128fef;
  background: #ffffff;
  margin-left: .2rem;
}

.buttonDivCss {
  width: 7.2rem;
  height: 3rem;
  background: #FFF;
  padding-bottom: .3rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
}

.wrongTopicCss {
  background: #ff4c23;
}


</style>
